<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>菜品展示</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background-color: #fff8f6;
            color: #333;
        }

        header {
            background-color: #d62d20;
            padding: 25px 0;
            text-align: center;
            color: white;
        }

        header h1 {
            font-size: 32px;
            font-weight: bold;
        }

        main {
            padding: 30px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .menu {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
        }

        .dish-card {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
            width: 300px;
            overflow: hidden;
            text-align: center;
            transition: transform 0.3s ease-in-out;
        }

        .dish-card:hover {
            transform: translateY(-8px);
        }

        .dish-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .dish-info {
            padding: 20px;
        }

        .dish-info h2 {
            font-size: 24px;
            color: #333;
            margin-bottom: 10px;
        }

        .dish-info .price {
            font-size: 20px;
            color: #e74c3c;
            font-weight: bold;
        }

        form {
            margin-top: 30px;
            text-align: center;
        }

        select {
            padding: 10px 16px;
            font-size: 16px;
            border-radius: 6px;
            border: 1px solid #ccc;
            margin-top: 10px;
            background-color: #fff;
            cursor: pointer;
        }

        .saveOrderBtn {
            margin-top: 25px;
            padding: 12px 30px;
            font-size: 16px;
            background-color: #d62d20;
            border: none;
            color: white;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .saveOrderBtn:hover {
            background-color: #b31d17;
        }

        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 15px;
            margin-top: 50px;
        }
    </style>
</head>
<body>

<header>
    <h1>肯德基美味点餐</h1>
</header>

<main id="app">
    <section class="menu">
        <!-- 菜品展示卡片 -->
        <div class="dish-card" v-if="dish.dishId">
            <img :src="dish.dishImg" alt="菜品图片">
            <div class="dish-info">
                <h2>{{ dish.dishName }}</h2>
                <p class="price">¥ {{ dish.dishPrice }}</p>
            </div>
        </div>
    </section>

    <!-- 优惠券选择 -->
    <form>
        <label for="couponSelect"><strong>可使用的优惠券：</strong></label><br>
        <select id="couponSelect" @change="getSelectedCoupon($event)">
            <option>--请选择优惠券--</option>
            <option v-for="(mycoupon, index) in myCouponList"
                    :value="mycoupon.mycouponId"
                    :key="mycoupon.mycouponId">
                {{ mycoupon.other1 }}
            </option>
        </select>
    </form>

    <!-- 下订单按钮 -->
    <button class="saveOrderBtn" @click="saveOrder()">下订单</button>
</main>

<footer>
    <p>&copy; 2025 肯德基点餐系统</p>
</footer>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            dish: {
                dishId: "",
                dishName: "",
                dishImg: "",
                dishPrice: ""
            },
            myCouponList: [],
            selectedCoupon: {
                mycouponId: "",
                other1: "",
                other2: ""
            },
            newOrder: {
                orderId: "",
                dishId: "",
                dishName: "",
                dishImg: "",
                dishPrice: "",
                orderPrice: "",
                couponName: "",
                mycouponId: "",
                couponPrice: ""
            }
        },
        mounted() {
            this.getById();
            this.getAllMyCoupons();
        },
        methods: {
            getById() {
                const urlParams = new URLSearchParams(window.location.search);
                const id = urlParams.get("id");
                axios.get("dish/" + id).then(response => {
                    if (response.data.code === 200) {
                        this.dish = response.data.data;
                    } else {
                        alert("菜品信息加载失败");
                    }
                }).catch(error => {
                    console.error(error);
                    alert("请求出错");
                });
            },
            getAllMyCoupons() {
                axios.get("mycoupon/status/0")
                    .then(response=>{
                        this.myCouponList = response.data.data;  // mycoupon, couponName
                        console.log(response.data.data)
                    }).catch(error=>{
                    console.log(error)
                })
            },
            getSelectedCoupon(event) {
                const mycouponId = event.target.value;
                const selectedCoupon = this.myCouponList.find(coupon => coupon.mycouponId === parseInt(mycouponId));
                if (selectedCoupon) {
                    this.selectedCoupon = {
                        mycouponId: selectedCoupon.mycouponId,
                        other1: selectedCoupon.other1,
                        other2: selectedCoupon.other2
                    };
                } else {
                    this.selectedCoupon = { mycouponId: "", other1: "", other2: "" };
                }
            },
            saveOrder() {
                this.newOrder = {
                    dishId: this.dish.dishId,
                    dishName: this.dish.dishName,
                    dishImg: this.dish.dishImg,
                    dishPrice: this.dish.dishPrice,
                    mycouponId: this.selectedCoupon.mycouponId,
                    couponName: this.selectedCoupon.other1,
                    couponPrice: this.selectedCoupon.other2,
                    orderPrice: this.dish.dishPrice - (this.selectedCoupon.other2 || 0)
                };
                axios.post("myorder", this.newOrder)
                    .then(response => {
                        this.newOrder.orderId = response.data.data.orderId;
                        window.location.href = "order_detail.html?id=" + this.newOrder.orderId;
                    }).catch(error => {
                    console.log(error);
                    alert("下单失败");
                });
            }
        }
    });
</script>

</body>
</html>
